import React from 'react';
import ReactDOM from 'react-dom';

import { HashRouter as Router, Route, Switch} from 'react-router-dom'
import { Provider } from 'mobx-react';
import allStore from './stores';

import { asyncComponent } from 'react-async-component';
import { Tools } from 'weaver-mobile';
import { FloatingTouch } from 'weaver-mobile-page';

import './style';
const coms = {
  Home: asyncComponent({
    resolve: () => import("./components/main")
  }),
  ViewMeeting: asyncComponent({
    resolve: () => import("./components/detail")
  }),
  RoomPlan: asyncComponent({
    resolve: () => import("./components/roomPlan/roomDisplay2")
  }), 
  SelectRoom: asyncComponent({
    resolve: () => import("./components/roomPlan/selectRoom")
  }),
  meetingSearch: asyncComponent({
    resolve: () => import("./components/search/index.js")
  }),
  meetingCalendar: asyncComponent({
    resolve: () => import("./components/calendar/index.js")
  }),
  memberDetail: asyncComponent({
    resolve: () => import("./components/base/member/index")
  }),
  signResult: asyncComponent({
    resolve: () => import("./components/signResult/index")
  }),

}


class Root extends React.Component {

  getLocaleLabel = Tools.getLocaleLabel;

  constructor(props) {
    super(props);
    this.state = {
      loadLang: false
    }
    this.getLocaleLabel.bind(this);
  
  }
  componentDidMount() {
    this.getLocaleLabel('meeting_mobile', () => {
      this.setState({loadLang: true});
    });
  }

  onHomePageClick() {
    window.location.href = '/#/';
  }

  render() {
    return (
      <Provider {...allStore}>
      <Router>
        <FloatingTouch onClick={() => this.onHomePageClick()}>
          <Route name="home" path="/" component={() => {
            if(!this.state.loadLang){
              return <div></div>
            }else{
              return (<coms.Home>
                  <Switch>
                    <Route name="detail" breadcrumbName='会议信息' path="/detail"  component={coms.ViewMeeting} />
                    <Route name="roomPlan" breadcrumbName='会议室使用情况' path="/roomPlan"  component={coms.RoomPlan} />
                    <Route name="selectRoom" breadcrumbName='选择会议室' path="/selectRoom"  component={coms.SelectRoom} />
                    <Route name="calendar" breadcrumbName='会议日历' path="/calendar"  component={coms.meetingCalendar} />
                    <Route name="search" breadcrumbName='查询会议' path="/search"  component={coms.meetingSearch} />
                    <Route name="memberDetail" breadcrumbName='查询会议' path="/memberDetail"  component={coms.memberDetail} />
                    <Route name="signResult" breadcrumbName='会议扫描结果' path="/signResult"  component={coms.signResult} />
                  </Switch>
                </coms.Home>)
                }
              }} />
        </FloatingTouch>
      </Router>
      </Provider>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('root'));